<template>
	<div>
		<div class="flex items-center group cursor-pointer" @click="insuranceButtonClick">
			<img src="/images/icon/editIcon.svg" alt="editIcon" class="mr-2">
			<span class="text-blue-700 group-hover:underline">编辑</span>
		</div>
		<!-- 保险弹窗 -->
		<t-dialog 
		:visible.sync="visible" 
		width="736px"
		:onConfirm="onConfirmAnother"
		:confirmBtn="loading"
		>
			<span class="text-lg text-gray-900 font-bold">保险办理</span>
			<transition-group name="formList">
				<t-form
				v-for="(item, id) in arr" 
				:key="item.id" 
				:data="item" 
				labelAlign="top"
				>
					<t-divider></t-divider>
					<div class="flex justify-between">
						<t-form-item
						label="交保日期" 
						name="insurance_date" 
						requiredMark
						class="w-80"
						>
							<t-date-picker 
							class="w-full"
							v-model="item.insurance_date" 
							placeholder="请选择交保日期"
							:status="item.verify.insurance_date_status"
							:tips="item.verify.insurance_date_tips"
							:onBlur="insuranceDateBlur"
							></t-date-picker>
						</t-form-item>
						<t-form-item
						label="交保类型"
						name="type"
						requiredMark
						class="w-80"
						>
							<t-select
							v-model="item.type"
							placeholder="请输入交保类型"
							:options="typeOptions"
							:status="item.verify.type_status"
							:tips="item.verify.type_tips"
							:onBlur="typeBlur"
							>
							</t-select>
						</t-form-item>
					</div>
					<div class="flex justify-between">
						<t-form-item
						label="交保账号"
						name="account_number"
						requiredMark
						class="w-80"
						>
							<t-input
							v-model="item.account_number"
							placeholder="请输入交保账号"
							:status="item.verify.account_number_status"
							:tips="item.verify.account_number_tips"
							:onBlur="accountNumberBlur"
							></t-input>
						</t-form-item>
						<t-form-item
						label="备注"
						name="remarks"
						class="w-80"
						>
							<t-input
							v-model="item.remarks"
							placeholder="请输入相关备注"
							></t-input>
						</t-form-item>
					</div>
					<!-- 删除按钮 -->
					<icon
					name="delete" 
					class="cursor-pointer hover:text-blue-700"
					size="small"
					@click="deleteInsurance(item.id)"
					></icon>
				</t-form>
			</transition-group>
		</t-dialog>
	</div>
</template>

<script>
	import { Icon, AddCircleIcon } from 'tdesign-icons-vue'
	import { isSpecial } from '@/unit'
	
	export default {
		name: 'InsuranceButton',
		components:{
			Icon,
			AddCircleIcon
		},
		data() {
			return {
				// 控制弹窗显示
				visible: false,
				// 提交的表单
				formData: [{
					id: '',
					user_id: '',
					insurance_date: '',
					type: '',
					account_number: '',
					remarks: '',
					verify: {
						insurance_date_status: '',
						insurance_date_tips: '',
						type_status: '',
						type_tips: '',
						account_number_status: '',
						account_number_tips: '',
					}
				}],
				// 选择框
				typeOptions: [
					{
						value:'养老保险',
						label: '养老保险'
					},
					{
						value:'生育保险',
						label: '生育保险'
					},
					{
						value:'医疗保险',
						label: '医疗保险'
					},
					{
						value:'失业保险',
						label: '失业保险'
					},
					{
						value:'工伤保险',
						label: '工伤保险'
					},
					{
						value:'公积金',
						label: '公积金'
					}
				],
				// 提交状态
				loading: {},
				arr: []
			}
		},
		methods: {
			// 交保日期校验
			insuranceDateBlur(){
				for(let i = 0 ; i < this.arr.length ; i++){
					if(this.arr[i].insurance_date === ''){
						this.arr[i].verify.insurance_date_status = 'error'
						this.arr[i].verify.insurance_date_tips = '交保日期是必选项'
						return false
					} else {
						this.arr[i].verify.insurance_date_status = ''
						this.arr[i].verify.insurance_date_tips = ''
					}
				}
				return true
			},
			// 交保类型校验
			typeBlur(){
				for(let i = 0 ; i < this.arr.length ; i++){
					if(this.arr[i].type === ''){
						this.arr[i].verify.type_status = 'error'
						this.arr[i].verify.type_tips = '交保类型是必选项'
						return false
					} else {
						this.arr[i].verify.type_status = ''
						this.arr[i].verify.type_tips = ''
					}
				}
				return true
			},
			// 交保账户校验
			accountNumberBlur(){
				for(let i = 0 ; i < this.arr.length ; i++){
					if(this.arr[i].account_number === ''){
						this.arr[i].verify.account_number_status = 'error'
						this.arr[i].verify.account_number_tips = '交保账号是必填项'
						return false
					} 
					if (!isSpecial(this.arr[i].account_number)){
						this.arr[i].verify.account_number_status = 'error'
						this.arr[i].verify.account_number_tips = '交保账号不能含有特殊字符'
						return false
					}
					this.arr[i].verify.account_number_status = ''
					this.arr[i].verify.account_number_tips = ''
				}
				return true
			},
			// 保险办理按钮点击
			insuranceButtonClick() {
				this.visible = true
			},
			// 提交方法
			onSubmit() {
				if(!(this.insuranceDateBlur() && this.typeBlur() && this.accountNumberBlur())){
					this.loading = {}
					return this.$message.error('请检查表单中不合法的选项')
				}
				let arr = []
				for(let i = 0 ; i < this.formData.length ; i++){
					arr[i] = {}
					arr[i].user_id = this.$route.query.id
					arr[i].insurance_date = this.formData[i].insurance_date
					arr[i].type = this.formData[i].type
					arr[i].account_number = this.formData[i].account_number
					arr[i].remarks = this.formData[i].remarks
					arr[i].id = this.formData[i].id
					arr[i].state = this.formData[i].state
				}
				this.$store.dispatch('user/updateInsurance', arr).then(res => {
					this.loading = {}
					if(res.status === 0){
						this.$message.success(res.message)
						this.$bus.emit('getUserData')
						this.visible = false
					} else {
						this.$message.error(res.message)
					}
				}).catch(err => {
					this.loading = {}
					this.$message.error(err)
				})
			},
			// 确认按钮
			onConfirmAnother() {
				this.loading = {
					content: '提交中...',
					theme: 'primary',
					loading: true,
				}
				this.onSubmit()
			},
			// 删除保险表单
			deleteInsurance(id) {
				for(let i = 0 ; i < this.formData.length ; i++){
					if(this.formData[i].id === id){
						this.formData[i].state = 1
					}
				}
				this.arr = this.formData.filter(item => {
					return item.id !== id
				})
			}
		},
		mounted() {
			let arr = this.$store.state.user.userInfoData[2]
			this.formData = arr.map(item => {
				return Object.assign(
					{},
					{id: item.id},
					{user_id: item.user_id},
					{insurance_date: item.insurance_date},
					{type: item.type},
					{account_number: item.account_number},
					{remarks: item.remarks},
					{state: 0},
					{verify: {
						insurance_date_status: '',
						insurance_date_tips: '',
						type_status: '',
						type_tips: '',
						account_number_status: '',
						account_number_tips: '',
					}},
				)
			})
			this.arr = this.formData
		}
	}
</script>

<style lang="less" scoped>
	.formList-enter-active{
		animation: formStart 1s
	}
	
	.formList-leave-active{
		animation: formEnd 1s
	}
	
	@keyframes formStart {
		from{
			opacity: 0;
			transform: translateY(-10%)
		}
		to {
			opacity: 1;
			transform: translateY(0)
		}
	}
	
	@keyframes formEnd {
		from{
			opacity: 1;
			transform: translateX(0);
		}
		to{
			opacity: 0;
			transform: translateX(-100%);
		}
	}
</style>